<template>
    <div>
        <div>
        <h2>用户赎回-------投资列表</h2>
       <span>项目名称：</span><input type="text" v-model="state.name" />
        <span>项目总金额：</span><input type="text" v-model="state.MinMoney" />-<input type="text" v-model="state.MaxMoney" />
        <input type="button" value="查询" @click="show" class="btn btn-success" />
       <input type="button" value="批量删除" class="btn btn-danger"  />
    </div>
    <div>
        <table class="table table-bordered">
             <tr align="center">
                <td><input type="checkbox"></td>
                <td>项目编号</td>
                <td>项目名称</td>
                <td>项目总金额</td>
                <td>已投资金额</td>
                <td>剩余投资金额</td>
                <td>操作</td>
            </tr>
                <tr align="center" v-for="item in plist">
                <td><input type="checkbox"></td>
                <td>{{item.I_Id}}</td>
                <td>{{item.I_Name}}</td>
                <td>{{item.I_Budget}}</td>
                <td>{{item.UI_Money}}</td>
                <td>{{item.I_Residue}}</td>
                <td><input type="button" value="赎回" @click="redeem(item.UI_Id)" class="btn btn-primary" />
                   </td>
            </tr>
        </table>
    </div>
    <div>
        <select v-model="state.pageSize" @change="changepage" >
            <option :value="item" v-for="item in arr">每页{{item}}条</option>
        </select>
       
        <input type="button" value="首页" @click="page('a')" />
        <input type="button" value="上一页" @click="page('prev')" />
        <input type="button" value="下一页" @click="page('next')" />
        <input type="button" value="尾页" @click="page('b')" />
     
        <input type="text" size="5" v-model="aa" />
        <input type="button" value="GO" @click="page('c')" />
        共<span style="color: red;">{{totalCount}}</span>条数据
        每页<span style="color: red;">{{state.pageSize}}</span>条 
        当前第<span style="color: red;">{{state.pageIndex}}</span>/
        <span style="color: red;">{{totalPage}}</span>页
    </div>
    </div>
</template>

<script setup lang="ts">
import{reactive,ref,toRefs,onMounted} from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from  '../../store/User'
import axios from 'axios'
const userUserStore=useUserStore()
let router=useRouter()
//数据--------------------------
let data:any=reactive({
    plist:[],
    state:{
        pageSize:2,
        pageIndex:1,
        name:'',
        IId:'', 
        MinMoney:'',
        MaxMoney:'',
    },
    arr:[2,3,4,5,6],
    totalCount:'0',
    totalPage:'0',
    aa:'0',
})
let {state,plist,totalCount,totalPage,arr,aa}=toRefs(data)
//函数--------------------

//赎回
const redeem=(UI_Id:any)=>{
    router.push({
        path:'/main/userReedem',
        query:{
            id:UI_Id
        }
    })
}
//跳转到第几页  首页尾页上一页下一页
const page=(str:any)=>{
    console.log(str);
    if(str=='prev')
    {
        if(state.value.pageIndex==1)
        {
            alert('已经是第一页了');
            state.value.pageIndex=1
            return;
        }
         state.value.pageIndex--
    }
   else if(str=='next')
    {
        if(state.value.pageIndex==totalPage.value)
        {
            alert('已经是最后一页了');
            state.value.pageIndex=totalPage.value
            return;
        }
         state.value.pageIndex++
    }
    else if(str=='a')
    {
        state.value.pageIndex=1;
    }
    else if(str=='b')
    {
        state.value.pageIndex=totalPage.value;
    }
    else 
    {
        if(aa.value=="")
        {
            alert('页码不能为空');
            return;
        }
        if(isNaN(aa.value)==true)
        {
            alert('页码只能是数字');
            return;
        }
        if(aa.value<1||aa.value>totalPage.value)
        {
            alert('页码必须在1-'+totalPage.value+'之间');
            return;
        }
        state.value.pageIndex=aa.value;
    }
     show();
}
//页容量的改变
const changepage=()=>{
    state.value.pageSize=state.value.pageSize
    state.value.pageIndex=1
    show();
}
//页面一加载就渲染函数
onMounted(()=>{
    show();
})
//获取列表数据
const show=()=>{
    axios({
        url:"/api/Invest/GetUserRedeemInfo",
        method:'get',
        params:{
            uid:userUserStore.userInfo.U_Id
        }
    })
    .then(res=>{
        console.log(res.data.data)
        plist.value=res.data.data
       //totalCount.value=res.data.totalCount
        //totalPage.value=res.data.totalPage

    })
    .catch(err=>{
        console.log(err)
    })
}
</script>

<style>

</style>